<template>
  <div class="container">
    <el-row type="flex" justify="space-between">
      <el-col class="col-emits">
        <postNav @cityName="getCityPost"/>
        <el-col>
          <h4 class="urban">推荐城市</h4>
            <img src="@/assets/tuijan.png" alt class="recommend" @click="getPost"/>
        </el-col>
      </el-col>
      <el-col class="right">
        <div class="rightHeader">
          <el-input v-model="city" placeholder="请输入想去的地方，比如：'广州'">
            <template>
              <el-button slot="append" icon="el-icon-search" @click="headerSearch"></el-button>
            </template>
          </el-input>
          <div class="recommend">
            推荐：
            <span @click="getCityPost('广州')">广州</span>
            <span class="shanghai" @click="getCityPost('上海')">上海</span>
            <span @click="getCityPost('北京')">北京</span>
          </div>
        </div>
        <el-row type="flex" justify="space-between" align="middle" class="biaoti">
          <h4>推荐攻略</h4>
          <el-button type="primary" icon="el-icon-edit" @click="$router.push({path:'/post/create'})">写日记</el-button>
        </el-row>
        <postList :dataList="dataList"/>
        <!-- <div>
          文章列表
        </div> -->
        
      </el-col>
    </el-row>
    <el-row type="flex" justify="end">
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageIndex"
      :page-sizes="[3, 5, 15, 25]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      prev-text="上一页"
      next-text="下一页">
    </el-pagination>
    </el-row>
  </div>
</template>

<script>
import postNav from "@/components/post/postNav";
import postList from "@/components/post/postList";

export default {
  components: {
    postNav,
    postList
  },
  data(){
    return {
      city: "",
      // 缓存文章列表
      postList: [],
      // 文章总条数
      total: 0,
      // 当前页数
      pageIndex:1,
      // 每一页的条数
      pageSize:3,
      // 分页列表
      dataList:[]
    }
  },
  methods:{
    // 获取城市文章
    getCityPost(citys){
      this.city = citys
      this.$axios({
        url: "/posts",
        params:{
          city: this.city
        }
      }).then(res=>{
        const {data,total} = res.data
        data.forEach(element => {
          const index =element.account.defaultAvatar.indexOf('http')
          if(index === -1){
            element.account.defaultAvatar = this.$axios.defaults.baseURL + element.account.defaultAvatar
          }
          element.images.forEach(item =>{
            let index = item.indexOf('http');
            if(index === -1){
              item = this.$axios.defaults.baseURL + item
            }
          })
        });
        // 储存文章
        this.postList = data
        // 文章总条数
        this.total = total;
        // 分页
      this.dataList = this.postList.slice(this.pageIndex-1,this.pageIndex*this.pageSize)
        // console.log(res)
      })

    },
    // 点击搜索
    headerSearch(){
      if(!this.city.trim()){
         this.$alert("请输入你要查找的城市", "提示", {
                    type: "warning"
          })
          return
      }
      this.getCityPost(this.city);
      
    },
    // 获取推荐文章
    getPost(){
      this.$axios({
      url: "/posts",
      params:{
        _start: 0,
        _limit: 100
      }
    }).then(res=>{
      const {data,total} = res.data;
      data.forEach(element => {
          const index =element.account.defaultAvatar.indexOf('http')
          if(index === -1){
            element.account.defaultAvatar = this.$axios.defaults.baseURL + element.account.defaultAvatar
          }
          element.images.forEach(item =>{
            let index = item.indexOf('http');
            if(index === -1){
              item = this.$axios.defaults.baseURL + item
            }
          })
        });
        // 存储文章
      this.postList = data
      // 文章的总条数
      this.total = total
      // 分页
      this.dataList = this.postList.slice(this.pageIndex-1,this.pageIndex*this.pageSize)
      // console.log(data)
    })
    },
    // 分页条数
    handleSizeChange(val) {
        // console.log(`每页 ${val} 条`);
        this.pageSize = val;
        // 选择分页条数后，自动跳到第一页
        this.pageIndex = 1
        this.dataList = this.postList.slice(this.pageIndex-1,this.pageIndex*val)
      },
      // 分页
      handleCurrentChange(val) {
        // console.log(`当前页: ${val}`);
        this.pageIndex = val;
        this.dataList = this.postList.slice((val-1)*this.pageSize,val*this.pageSize)
      }
  },
  mounted(){
    // 挂载完毕，获取推荐文章
    this.getPost();
    
  }
};
</script>

<style lang="less" scoped>
.container {
  width: 1000px;
  margin: 0 auto;
  padding: 20px 0;
  .urban {
    font-size: 16px;
    font-weight: normal;
    margin: 20px 0 10px;
    border-bottom: 1px solid #ddd;
    padding: 0 0 10px;
  }
  .recommend {
    cursor: pointer;
    width: 260px;
  }
  .col-emits{
    width: 260px;
  }
  .right{
    width: 700px;
    .rightHeader{
      .recommend{
        padding: 10px 0;
        font-size: 12px;
        color: #666667;
        &>span{
          cursor: pointer;
          &:hover{
            color: #ffa500;
            text-decoration: underline;
          }
        }
        .shanghai{
          margin: 0 5px;
        }
      }
    }
    .biaoti{
      h4{
        font-weight: normal;
        font-size: 18px;
        color: #ffa500;
       height: 50px;
       line-height: 50px;
        border-bottom: 2px solid #ffa500;
      }
      height: 51px;
      padding: 0 0 2px;
      border-bottom: 1px solid #ddd;
    }
  }
}
</style>